:root {
	--background-black: #0b0b0b;
	--background-orange: #fcac45;

	--content-font-color: #6c6c6c;
}


#header {
	background: var(--background-black);

	.container {
		margin-top: 30px;
	}

	.navbar {
		margin-bottom: 0;
		// min-height: 95px;
	}

	.navbar-inverse {
		border: none;
		background-color: #111111;
	}

	.nav > li {
		text-transform: uppercase;
		border-bottom: 2px solid transparent;

		&:hover {
			border-color: #292929;
		}
	}

	.navbar-brand {
		text-transform: uppercase;
		color: #fff;
	}

	.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-text {
		color: white;
	}
}

#footer {
	background: var(--background-black);
	height: 92px;
	display: flex;

	.footer-box {
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--content-font-color);
		font-family: OSLight, serif;

		span {
			font-family: OSBold, serif;
		}

		.copyright-icon {
			display: flex;
			column-gap: 14px;

			img {
				width: 30px;
				height: 30px;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	#header {
		position: absolute;
		width: 100%;

		.container {
			margin-top: unset;
		}
	}

	#banner {
		padding-top: 50px;
	}

	#footer {
		.footer-box {
			flex-wrap: wrap;
			row-gap: 3vw;
		}
	}
}